<aside class="right-side">                
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Báo giá
            <small>Chi tiết</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>Trang chủ</a></li>
           <li class="active">Báo giá > Chi tiết</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12"> 
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Chi tiết báo giá</h3>             
                    </div>
                    <div class="box-body table-responsive">
                        <div id="example1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                            <table id="example1" class="table table-bordered table-hover dataTable" aria-describedby="example1_info">
                            <thead>
                                <tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 172px;">Sản phẩm</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 230px;">Đơn giá</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;">Số lượng</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;">Thành tiền</th><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 172px;">Sản phẩm</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 230px;">Báo giá</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;">Số lượng</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;">Thành tiền</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;"></th>
                                </tr>
                            </thead>
                            
                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            <?php if(count($order_details) > 0) {
                                foreach ($order_details as $od) {?>
                                    <tr id="<?php echo $od->prod_id;?>">
                                        <td class=" sorting_1"><?php echo $od->name;?><input type="text" style="display:none" value="<?php echo $od->prod_id;?>"/></td>
                                        <td class=" "><?php echo $od->price;?></td>
                                        <td class=" "><?php echo $od->count;?></td>
                                        <td class=" "><?php echo $od->real_total;?></td>
                                        <td class=" sorting_1"><?php echo $od->name;?></td>
                                        <td class=" "><?php echo $od->virtual_price;?></td>
                                        <td class=" "><?php echo $od->count;?></td>
                                        <td class=" "><?php echo $od->virtual_total;?></td>
                                        <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button onclick="edit(<?php echo $od->prod_id;?>)" class="btn btn-info btn-flat">&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button onclick="delete_row(<?php echo $od->prod_id;?>)" class="btn btn-danger btn-flat">&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button></td>
                                    </tr>
                                <?php }} else { ?>
                                    <tr id="null">
                                    <td class=" sorting_1">Không có dữ liệu</td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td class=" "></td>
                                    <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button class="btn btn-info btn-flat" disable>&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button class="btn btn-danger btn-flat" disable>&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button></td>
                                </tr>
                                <?php } ?>
                            </tbody></table>
                        </div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div>
        </div>
    </section><!-- /.content -->
</aside>

<script type="text/javascript">
    //get base url;
    var base_url = '<?php echo base_url();?>';
    var order_id = "<?php echo $order_id;?>";
    
    //------------------------------- add data row -----------------------------------
    var obj;

    function add () {
        var newRow = '<tr id="new_row"><td><select id="name"'
            + 'onclick="change_product()">'
            + '<option value="0">Sản phẩm</option></select>'
            + '</td><td><input type="text" id="price"'
            + ' value="0" disabled class="form-control"/></td>'
            + '<td><input type="text" id="count"'
            + 'onchange="change_count()" class="form-control"'
            + '/></td><td><input type="text" id="real_total"'
            + ' value="0" disabled class="form-control"/></td>'
            + '<td><input type="text" value="Chưa chọn" disabled'
            + ' class="form-control"/></td><td><input id="new_price"'
            + ' type="text" class="form-control"'
            + ' onchange="change_price()"'
            + ' value=""/></td>'
            + '<td><input type="text" value="0" disabled'
            + ' class="form-control"/></td><td><input type="text"'
            + ' value="0" disabled class="form-control"/></td><td>'
            + '<button onclick="ok_add()" class="btn btn-primary'
            + ' btn-flat">Đồng ý </button><br/><button'
            + ' onclick="cancle_add()"'
            + 'class="btn btn-danger btn-flat">'
            + '&nbsp;&nbsp;&nbsp;Hủy&nbsp;&nbsp;&nbsp;'
            + '</button></td></tr>';
        $('#example1 > tbody > tr:first').before(newRow);

        $.ajax({
             type: "GET",
             url: base_url + "product/get",  
             cache : false,
             success: 
                  function(json){
                    obj = jQuery.parseJSON(json);

                    var i = 0;
                    for(; i < obj.prods.length; i++) {
                        var item = '<option value="' + obj.prods[i].id + '">'
                        + obj.prods[i].name + '</option>';

                        $('#name').append(item);
                    }
                  },
            error: function() {

            }
        });
    }

    function ok_add() {
        var prod_id = $('select#name option:selected').val();
        var name = $('select#name option:selected').text();
        var count = $('input#count').val();
        var price = $('input#price').val();
        var real_total = $('input#real_total').val();
        var virtual_price = $('input#new_price').val();
        var virtual_total = $('tr#new_row >td:nth-child(8)').find('input').val();

        if(prod_id == 0) {
            alert("Vui lòng chọn sản phẩm");
            return false;
        }

       if(!count) {
            alert('Vui lòng nhập số lượng');
            return false;   
        }else{ 
            if(!$.isNumeric(count)) {
                alert('Vui lòng nhập số vào ô số lượng');
                return false;
            }else {
                if(count < 0) {
                    alert('Số lượng không được nhỏ hơn 0');
                    return false;
                }
            }
        }

        if(!virtual_price) {
            alert('Vui lòng nhập báo giá');
            return false;   
        }else{ 
            if(!$.isNumeric(virtual_price)) {
                alert('Vui lòng nhập số vào ô báo giá');
                return false;
            }else {
                if(virtual_total < 0) {
                    alert('báo giá không được nhỏ hơn 0');
                    return false;
                }
            }
        }

        //data to submit
        var order_detail = {
            order_id : order_id,
            prod_id : prod_id,
            count : count,
            virtual_price : virtual_price,
            real_total : real_total,
            virtual_total : virtual_total
        };

        $.ajax({
         type: "POST",
         url: base_url + "order_detail/add_new", 
         data: order_detail,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Thêm thành công!!!');
                var obj = jQuery.parseJSON(json);

                //add data row to database
                var dataRow = [
                    name + '<input type="text"'
                    + ' style="display: none" value="' + prod_id 
                    + '" />',
                    price,
                    count,
                    real_total,
                    name,
                    virtual_price,
                    count,
                    virtual_total,
                    '<button id="' + prod_id + '"'
                    + ' onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button>'
                    + '<br/><button onclick="edit(' + prod_id + ')"'
                    + 'class="btn btn-info btn-flat">'
                    + '&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/>'
                    + '<button onclick="delete_row(' + prod_id + ')"'
                    + 'class="btn btn-danger btn-flat">'
                    + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                
                t.row('#null').remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + prod_id).parent().parent().attr('id', prod_id);
              },
        error: function() {
                alert('Thêm thất bại. Chi tiết đã chứa sản này');
            }
        });
    }

    function cancle_add() {
        $('#example1 >tbody >tr:first').remove();
    }

    //---------------- end add datarow ---------------------------------------------
     
    //----------------- edit row ---------------------------------------------------    
    //edit data row
    function edit(id) {
        var prod_id = $('tr#' + id + ' > td:first').find('input').val();
        var price = $('tr#' + id + ' > td:nth-child(2)').text();
        var count = $('tr#' + id + ' > td:nth-child(3)').text();
        var real_total = $('tr#' + id + ' > td:nth-child(4)').text();
        var name = $('tr#' + id + ' > td:nth-child(5)').text();
        var virtual_price = $('tr#' + id + ' > td:nth-child(6)').text();
        var virtual_total = $('tr#' + id + ' > td:nth-child(8)').text();

	    var newRow = '<tr id="new_row"><td><select id="name"'
            + 'onclick="change_product()"></select>'
            + '</td><td><input type="text" id="price"'
            + ' value="' + price + '" disabled class="form-control"/>'
            + '</td><td><input type="text" id="count"'
            + ' onchange="change_count()" value="' + count + '"'
            + ' class="form-control"/></td><td><input type="text" id="real_total" value="' + real_total + '"'
            + ' disabled class="form-control"/></td>'
            + '<td><input type="text" value="' + name + '"'
            + ' disabled class="form-control"/></td><td><input '
            + ' id="new_price" type="text" class="form-control"'
            + ' onchange="change_price()"'
            + ' value="' + virtual_price + '"/></td>'
            + '<td><input type="text" value="' + count + '" disabled'
            + ' class="form-control"/></td><td><input type="text"'
            + ' value="' + virtual_total +'" disabled'
            + ' class="form-control"/></td><td>'
            + '<button onclick="ok_edit('+ id +')"'
            + ' class="btn btn-primary'
            + ' btn-flat">Đồng ý </button><br/><button'
            + ' onclick="cancle_edit(' + id + ')"'
            + 'class="btn btn-danger btn-flat">'
            + '&nbsp;&nbsp;&nbsp;Hủy&nbsp;&nbsp;&nbsp;'
            + '</button></td></tr>';

            $.ajax({
             type: "GET",
             url: base_url + "product/get",  
             cache : false,
             success: 
                  function(json){
                    obj = jQuery.parseJSON(json);

                    var i = 0;
                    var item = '';
                    for(; i < obj.prods.length; i++) {
                        if(obj.prods[i].id != prod_id) {
                            item = '<option value="' + obj.prods[i].id 
                            + '">' + obj.prods[i].name + '</option>';
                        }else
                            item = '<option value="' + obj.prods[i].id 
                            + '" selected>'
                            + obj.prods[i].name + '</option>';

                        $('#name').append(item);
                    }
                  },
            error: function() {

            }
        });

        $('#example1 > tbody').find('tr#' + id).hide();    
        $('#example1 > tbody > tr#' + id).before(newRow);
    }

    //ok edit
     function ok_edit(id) {
        var prod_id = $('select#name option:selected').val();
        var name = $('select#name option:selected').text();
        var count = $('input#count').val();
        var price = $('input#price').val();
        var real_total = $('input#real_total').val();
        var virtual_price = $('input#new_price').val();
        var virtual_total = $('tr#new_row >td:nth-child(8)').find('input').val();

        if(!count) {
            alert('Vui lòng nhập số lượng');
            return false;   
        }else{ 
            if(!$.isNumeric(count)) {
                alert('Vui lòng nhập số vào ô số lượng');
                return false;
            }else {
                if(count < 0) {
                    alert('Số lượng không được nhỏ hơn 0');
                    return false;
                }
            }
        }

        if(!virtual_price) {
            alert('Vui lòng nhập báo giá');
            return false;   
        }else{ 
            if(!$.isNumeric(virtual_price)) {
                alert('Vui lòng nhập số vào ô báo giá');
                return false;
            }else {
                if(virtual_total < 0) {
                    alert('báo giá không được nhỏ hơn 0');
                    return false;
                }
            }
        }

        //data to submit
        var order_detail = {
            order_id : order_id,
            prod_id : prod_id,
            count : count,
            virtual_price : virtual_price,
            real_total : real_total,
            virtual_total : virtual_total
        };

        $.ajax({
         type: "POST",
         url: base_url + "order_detail/edit", 
         data: order_detail,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Cập nhật thành công!!!');

                var dataRow = [
                    name + '<input type="text"'
                    + ' style="display: none" value="' + prod_id 
                    + '" />',
                    price,
                    count,
                    real_total,
                    name,
                    virtual_price,
                    count,
                    virtual_total,
                    '<button id="' + prod_id + '"'
                    + ' onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button>'
                    + '<br/><button onclick="edit(' + prod_id + ')"'
                    + 'class="btn btn-info btn-flat">'
                    + '&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/>'
                    + '<button onclick="delete_row(' + prod_id + ')"'
                    + 'class="btn btn-danger btn-flat">'
                    + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                //remove old data
                t.row('#' + id).remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + id).parent().parent().attr('id', id);
              },
        error: function() {
                alert('Cập nhật thất bại!!!');
            }
        });
    }   

    function cancle_edit (id) {
        $('#example1 > tbody').find('tr#new_row').remove();    
        $('#example1 > tbody > tr#' + id).show();
    }

    //-------------------------------- end edit ----------------------------------
    //-------------------------------- delete -----------------------------------
    function delete_row (id) {
        if (confirm('Bạn có muốn xóa, thao tác này không thể phục hồi?')) {
            //data to submit
            var company = {
                id : id
            };

            $.ajax({
             type: "POST",
             url: base_url + "order/delete", 
             data: company,
             dataType: "text",  
             cache : false,
             success: 
                  function(json){
                    alert('Xóa thành công!!!');

                    //add row to data table
                    var t = $('#example1').DataTable();

                    //check if database has no row
                    if($('#example1 > tbody').children('tr').length == 1) {
                        var dataRow = [
                            'Không có dữ liệu',
                            '',
                            '',
                            '',
                            '<button onclick="add()" class="btn btn-primary btn-flat">Thêm'
                            + '</button><button class="btn btn-info btn-flat"'
                            + ' disable>Sửa</button><button '
                            + ' class="btn btn-danger btn-flat" disable>Xóa</button>'
                        ];
                        t.row.add(dataRow).draw();

                        //remove old data
                        t.row('#' + id).remove().draw();

                        //add id for new row
                        $('#example1 >tbody>tr:first').attr('id', 'null');
                    }
                    //remove old data
                    t.row('#' + id).remove().draw();

                  },
            error: function() {
                    alert('Xóa thất bại!!!');
                }
            });
        }
    }

    function change_product() {
        var id = $('select#name option:selected').val();
        var name = $('select#name option:selected').text();
        var price = 0;

        if(id != 0)
            price = obj.prods[id - 1].price;
        else
            name = 'Chưa chọn';

        var count = $('input#count').val();
        var real_total = price * count;

        $('input#price').val(price);
        $('input#real_total').val(real_total);
        $('tr#new_row >td:nth-child(5)').find('input').val(name);
    }

    function change_count() {
        var count = $('input#count').val();
        var price = $('input#price').val();
        var new_price = $('tr#new_row >td:nth-child(7)').find('input').val();

        if(!$.isNumeric(count)) {
            alert('Vui lòng nhập số vào ô số lượng');
            return false;
        }
        $('#real_total').val(count * price);
        $('tr#new_row >td:nth-child(7)').find('input').val(count);
        $('tr#new_row >td:nth-child(8)').find('input').val(new_price * count);   
    }

    function change_price() {
        var new_price = $('input#new_price').val();
        var count = $('input#count').val();

        if(!$.isNumeric(new_price)) {
            alert('Vui lòng nhập số vào ô báo giá');
            return false;
        }

        var virtual_total = new_price * count;

        $('tr#new_row >td:nth-child(8)').find('input').val(virtual_total);
    }

</script>
